<template>
	<view class="padding-bottom-xl bg-gray">
		<u-navbar v-if="!editeBool" :title="title" @leftClick="leftClick" :autoBack="false" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20">
			<view class="u-nav-slot font-30 color-w" slot="right" v-if="!editeBool" @click="toRecord">历史充值</view>
		</u-navbar>
		<u-navbar v-else :title="title" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20">
			<view class="u-nav-slot font-30 color-w" slot="right" v-if="!editeBool" @click="toRecord">历史充值</view>
		</u-navbar>

		<view class="boxInfo bg-white p-b-10">
			<view class="inp flex justify-between">
				<text class="font-28 font-b">收款二维码</text>
			</view>
			<view class="boxPadding position-r flex justify-center">
				<image src="/static/xyc/payCode.jpg" mode="widthFix" class="goods-img b-r-10" @click="lookImg('/static/xyc/payCode.jpg')"></image>
			</view>
		</view>

		<view class="boxInfo p-t-10">
			<view class="inp flex justify-between">
				<view class="font-28 font-b">
					<text class="color-r">*</text>
					充值金额
				</view>
				<input type="number" v-model="form.money" class="flex-1 font-28 text-right m-l-20" placeholder="请输入" />
			</view>
			<view class="bg-white font-24 color-yellow p-l-20 border-box p-b-10">*请仔细核对与充值凭证金额是否一致</view>
		</view>

		<view class="bg-white w-100 border-box boxContent m-t-10">
			<view class="font-28 font-b">
				<text class="color-r">*</text>
				充值凭证
			</view>
			<view class="flex">
				<u-upload class="m-t-20 " :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="5" />
			</view>
			<view class="font-24 color-gray m-t-20">请上传清晰完整充值凭证图片</view>
		</view>
		<view class="boxInfo p-t-10 p-b-10">
			<view class="inp">
				<text class="font-28 font-b">用户备注</text>
				<input type="textarea" class="flex-1 font-28 text-right m-l-20" placeholder="备注" v-model="form.remark" />
			</view>
		</view>
		<view class="p-t-20 p-b-20">
			<view class="submitBtn font-b font-28" v-if="!editeBool" @click="toSubmit">提交</view>
			<view class="submitBtn font-b font-28" v-if="editeBool && voucherData.state == 2" @click="changeSubmit">重新提交</view>
		</view>
	</view>
</template>

<script>
	import { uploadFile } from '@/common/utils/uploadImg.js'
	import { addVoucherInfo, changeVoucherInfo } from '@/common/api/voucher.js'
	import { mapState } from 'vuex'
	import { getCenterInfoById } from '@/common/api/serviceCenter.js'
	export default {
		data() {
			return {
				title : '余额充值',
				fileList1:[],
				form: {
					money: null,
					certificateUrls: [],
					remark: null,
				},
				editeBool: false,
				voucherData:{},//编辑数据
				num: 0,//报单数量
			};
		},
		onLoad(options){
			// 编辑
			if(options.data && options.data == 1){
				this.title = '充值凭证详情'
				this.editeBool = true
				let voucherData = uni.getStorageSync('newVoucherData')
				this.voucherData = voucherData
				this.form.money = voucherData.money
				this.form.certificateUrls = voucherData.certificateUrls || []
				this.form.remark = voucherData.remark
				let arr = []
				voucherData.certificateUrls.forEach(item => {
					arr.push({url: item})
				})
				this.fileList1 = arr
			}
		},
		methods: {
			// 预览图片 
			lookImg(url){
				uni.previewImage({
					urls: [url]
				});
			},
			// 返回
			leftClick(){
				let pages = getCurrentPages()
 				var beforePagePath = pages[pages.length - 2].route; // 前一个页面
				// 如果不是从积分商城主页进入,则才返回个人中心
				if(beforePagePath !== 'pages/serviceCenter/serviceCenterInfo'){
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					},200)
				}else{
					setTimeout(() => {
						uni.navigateBack()
					},200)
				}
			},
			// 删除图片
			deletePic(event) {
				this.form.certificateUrls.splice(event.index,1)
				this.fileList1.splice(event.index,1)
			},
			// 新增图片
			async afterRead(event) {
				const result = await this.uploadFilePromise(event.file[0].url)
				if(result.data[0].browseUrl){
					this.fileList1.push({url: result.data[0].browseUrl})
					this.form.certificateUrls.push(result.data[0].browseUrl)
				}
			},
			uploadFilePromise(file) {
				return new Promise((resolve, reject) => {
					let res = uploadFile(file, 9)
					resolve(res)
				})
			},
			// 提交历史
			toRecord(){
				uni.navigateTo({
					url: '/pages/newVoucher/voucherHistory'
				})
			},
			// 提交
			toSubmit(){
				if(!this.form.money){
					this.$msg('请正确输入充值金额！')
					return
				}else if(this.form.certificateUrls.length == 0){
					this.$msg('请正确上传充值凭证！')
					return
				}else{
					addVoucherInfo(this.form).then(res=>{
						if(res.code == 200){
							this.$msg('提交成功！')
							setTimeout(()=>{
								this.form = {
									// buyCount: 1,
									money: 4200,
									certificateUrls: [],
									remark: null,
								}
								this.fileList1 = []
								this.toRecord()
							},1000)
						}else{
							this.$msg(res.msg)
						}
					})
				}
			},
			// 重新提交
			changeSubmit(){
				let obj = {
					id: this.voucherData.id,
					money: this.form.money,
					certificateUrls: this.form.certificateUrls,
					remark: this.form.remark
				}
				changeVoucherInfo(obj).then(res=>{
					if(res.code == 200){
						this.$msg('修改提交成功!')
						setTimeout(()=>{
							this.form = {
								money: 4200,
								certificateUrls: null,
								remark: null,
							}
							this.fileList1 = []
							uni.navigateBack()
						},1000)
					}else{
						this.$msg(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #F2F2F2;
}
.goods-img{
	width:50%;
	height: auto;
}
.borderBtn{
	padding: 2rpx 10rpx;
	border: 2rpx solid #000;
}
.boxPadding{
	padding: 10rpx 5%;
}
.inp {
	width: 100%;
	padding: 10rpx 5%;
	margin: 0 auto;
	height: 92rpx;
	background: #ffffff;
	display: flex;
	align-items: center;
	input {
		border: none;
		outline: none;
		width: 100%;
		height: 100%;
		border-radius: 5rpx;
	}
}
.boxContent{
	padding: 20rpx 5%;
}
.boxAdd{
	width: 200rpx;
	height: 200rpx;
	line-height: 180rpx;
	text-align: center;
	font-size: 100rpx;
	color: gray;
	font-weight: lighter;
	border: 1px dotted gray;
	border-radius: 5rpx;
	margin-top: 20rpx;
}
.submitBtn{
	width: 90%;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	background: #ECA52B;
	color: #ffffff;
	border-radius: 100rpx;
	margin: 50rpx auto;
	letter-spacing: 10rpx;
}
.saoma{
	border: 2rpx solid gray;
	right: 20rpx;
	bottom: 20rpx;
	padding: 10rpx;
}
.imgBox{
	width: 560rpx;
	padding: 20rpx;
	padding-top: 80rpx;
	overflow: hidden;
}
.imgs{
	width: 520rpx;
	height: 520rpx;
}
</style>